<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 创建表单
 * @ignore
 */

  
var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  FieldContainer = require(&#39;./fieldcontainer&#39;),
  Component = BUI.Component,
  TYPE_SUBMIT = {
    NORMAL : &#39;normal&#39;,
    AJAX : &#39;ajax&#39;,
    IFRAME : &#39;iframe&#39;
  };

var FormView = FieldContainer.View.extend({
  _uiSetMethod : function(v){
    this.get(&#39;el&#39;).attr(&#39;method&#39;,v);
  },
  _uiSetAction : function(v){
    this.get(&#39;el&#39;).attr(&#39;action&#39;,v);
  }
},{
  ATTRS : {
    method : {},
    action : {}
  }
},{
  xclass: &#39;form-view&#39;
});

<span id='BUI-Form-Form'>/**
</span> * @class BUI.Form.Form
 * 表单控件,表单相关的类图：
 * &lt;img src=&quot;../assets/img/class-form.jpg&quot;/&gt;
 * @extends BUI.Form.FieldContainer
 */
var Form = FieldContainer.extend({
  renderUI : function(){
    var _self = this,
      buttonBar = _self.get(&#39;buttonBar&#39;),
      cfg;
    if($.isPlainObject(buttonBar) &amp;&amp; _self.get(&#39;buttons&#39;)){
      cfg = BUI.merge(_self.getDefaultButtonBarCfg(),buttonBar);
      _self._initButtonBar(cfg);
    }
    _self._initSubmitMask();
  },
  _initButtonBar : function(cfg){
    var _self = this;

    require.async(&#39;bui-toolbar&#39;, function(Toolbar){
      buttonBar = new Toolbar.Bar(cfg);
      _self.set(&#39;buttonBar&#39;,buttonBar);
    });
  },
  bindUI : function(){
    var _self = this,
      formEl = _self.get(&#39;el&#39;);

    formEl.on(&#39;submit&#39;,function(ev){
      _self.valid();
      if(!_self.isValid() || _self.onBeforeSubmit() === false){
        ev.preventDefault();
        _self.focusError();
        return;
      }
      if(_self.isValid() &amp;&amp; _self.get(&#39;submitType&#39;) === TYPE_SUBMIT.AJAX){
        ev.preventDefault();
        _self.ajaxSubmit();
      }

    });
  },
<span id='BUI-Form-Form-method-getDefaultButtonBarCfg'>  /**
</span>   * 获取按钮栏默认的配置项
   * @protected
   * @return {Object} 
   */
  getDefaultButtonBarCfg : function(){
    var _self = this,
      buttons = _self.get(&#39;buttons&#39;);
    return {
      autoRender : true,
      elCls :&#39;toolbar&#39;,
      render : _self.get(&#39;el&#39;),
      items : buttons,
      defaultChildClass : &#39;bar-item-button&#39;
    };
  },
<span id='BUI-Form-Form-method-focusError'>  /**
</span>   * 将焦点定位到第一个错误字段
   */
  focusError : function(){
    var _self = this,
      fields = _self.getFields();
    
    BUI.each(fields,function(field){
      if(field.get(&#39;visible&#39;) &amp;&amp; !field.get(&#39;disabled&#39;) &amp;&amp; !field.isValid()){
        try{
          field.focus();
        }catch(e){
          BUI.log(e);
        }
        
        return false;
      }
    });
  },
<span id='BUI-Form-Form-method-submit'>  /**
</span>   * 表单提交，如果未通过验证，则阻止提交
   */
  submit : function(options){
    var _self = this,
      submitType = _self.get(&#39;submitType&#39;);
    _self.valid();
    if(_self.isValid()){
      if(_self.onBeforeSubmit() == false){
        return;
      }
      if(submitType === TYPE_SUBMIT.NORMAL){
        _self.get(&#39;el&#39;)[0].submit();
      }else if(submitType === TYPE_SUBMIT.AJAX){
        _self.ajaxSubmit(options);
      }
    }else{
      _self.focusError();
    }
  },
<span id='BUI-Form-Form-method-ajaxSubmit'>  /**
</span>   * 异步提交表单
   */
  ajaxSubmit : function(options){
    var _self = this,
      method = _self.get(&#39;method&#39;),
      action = _self.get(&#39;action&#39;),
      callback = _self.get(&#39;callback&#39;),
      submitMask = _self.get(&#39;submitMask&#39;),
      data = _self.serializeToObject(), //获取表单数据
      success,
      ajaxParams = BUI.merge(true,{ //合并请求参数
        url : action,
        type : method,
        dataType : &#39;json&#39;,
        data : data
      },options);

    if(options &amp;&amp; options.success){
      success = options.success;
    }
    ajaxParams.success = function(data){ //封装success方法
      if(submitMask &amp;&amp; submitMask.hide){
        submitMask.hide();
      }
      if(success){
        success(data);
      }
      callback &amp;&amp; callback.call(_self,data);
    } 
    if(submitMask &amp;&amp; submitMask.show){
      submitMask.show();
    }
    $.ajax(ajaxParams); 
  },
  //获取提交的屏蔽层
  _initSubmitMask : function(){
    var _self = this,
      submitType = _self.get(&#39;submitType&#39;),
      submitMask = _self.get(&#39;submitMask&#39;);
    if(submitType === TYPE_SUBMIT.AJAX &amp;&amp; submitMask){
      require.async(&#39;bui/mask&#39;,function(Mask){
        var cfg = $.isPlainObject(submitMask) ? submitMask : {};
        submitMask = new Mask.LoadMask(BUI.mix({el : _self.get(&#39;el&#39;)},cfg));
        _self.set(&#39;submitMask&#39;,submitMask);
      });
    }
  },
<span id='BUI-Form-Form-method-serializeToObject'>  /**
</span>   * 序列化表单成对象，所有的键值都是字符串
   * @return {Object} 序列化成对象
   */
  serializeToObject : function(){
    return BUI.FormHelper.serializeToObject(this.get(&#39;el&#39;)[0]);
  },
<span id='BUI-Form-Form-method-toObject'>  /**
</span>   * serializeToObject 的缩写，所有的键值都是字符串
   * @return {Object} 序列化成对象
   */
  toObject : function(){
    return this.serializeToObject();
  },
<span id='BUI-Form-Form-method-onBeforeSubmit'>  /**
</span>   * 表单提交前
   * @protected
   * @return {Boolean} 是否取消提交
   */
  onBeforeSubmit : function(){
    return this.fire(&#39;beforesubmit&#39;);
  },
<span id='BUI-Form-Form-method-reset'>  /**
</span>   * 表单恢复初始值
   */
  reset : function(){
    var _self = this,
      initRecord = _self.get(&#39;initRecord&#39;);
    _self.setRecord(initRecord);
  },
<span id='BUI-Form-Form-method-resetTips'>  /**
</span>   * 重置提示信息，因为在表单隐藏状态下，提示信息定位错误
   * &lt;pre&gt;&lt;code&gt;
   * dialog.on(&#39;show&#39;,function(){
   *   form.resetTips();
   * });
   *   
   * &lt;/code&gt;&lt;/pre&gt;
   */
  resetTips : function(){
    var _self = this,
      fields = _self.getFields();
    BUI.each(fields,function(field){
      field.resetTip();
    });
  },
<span id='global-method-destructor'>  /**
</span>   * @protected
   * @ignore
   */
  destructor : function(){
    var _self = this,
      buttonBar = _self.get(&#39;buttonBar&#39;),
      submitMask = _self.get(&#39;submitMask&#39;);
    if(buttonBar &amp;&amp; buttonBar.destroy){
      buttonBar.destroy();
    }
    if(submitMask &amp;&amp; submitMask.destroy){
      submitMask.destroy();
    }
  },
  //设置表单的初始数据
  _uiSetInitRecord : function(v){
    //if(v){
      this.setRecord(v);
    //}
    
  }
},{
  ATTRS : {
<span id='BUI-Form-Form-property-action'>    /**
</span>     * 提交的路径
     * @type {String}
     */
    action : {
      view : true,
      value : &#39;&#39;
    },
    allowTextSelection:{
      value : true
    },
    events : {
      value : {
<span id='BUI-Form-Form-event-beforesubmit'>        /**
</span>         * @event
         * 表单提交前触发，如果返回false会阻止表单提交
         */
        beforesubmit : false
      }
    },
<span id='BUI-Form-Form-property-method'>    /**
</span>     * 提交的方式
     * @type {String}
     */
    method : {
      view : true,
      value : &#39;get&#39;
    },
<span id='BUI-Form-Form-property-defaultLoaderCfg'>    /**
</span>     * 默认的loader配置
     * &lt;pre&gt;
     * {
     *   autoLoad : true,
     *   property : &#39;record&#39;,
     *   dataType : &#39;json&#39;
     * }
     * &lt;/pre&gt;
     * @type {Object}
     */
    defaultLoaderCfg : {
      value : {
        autoLoad : true,
        property : &#39;record&#39;,
        dataType : &#39;json&#39;
      }
    },
<span id='BUI-Form-Form-property-submitMask'>    /**
</span>     * 异步提交表单时的屏蔽
     * @type {BUI.Mask.LoadMask|Object}
     */
    submitMask : {
      value : {
        msg : &#39;正在提交。。。&#39;
      }
    },
<span id='BUI-Form-Form-cfg-submitType'>    /**
</span>     * 提交表单的方式
     *
     *  - normal 普通方式，直接提交表单
     *  - ajax 异步提交方式，在submit指定参数
     *  - iframe 使用iframe提交,开发中。。。
     * @cfg {String} [submitType=&#39;normal&#39;]
     */
    submitType : {
      value : &#39;normal&#39;
    },
<span id='BUI-Form-Form-property-focusError'>    /**
</span>     * 表单提交前，如果存在错误，是否将焦点定位到第一个错误
     * @type {Object}
     */
    focusError : {
      value : true
    },
<span id='BUI-Form-Form-property-callback'>    /**
</span>     * 表单提交成功后的回调函数，普通提交方式 submitType = &#39;normal&#39;，不会调用
     * @type {Object}
     */
    callback : {

    },
    decorateCfgFields : {
      value : {
        &#39;method&#39; : true,
        &#39;action&#39; : true
      }
    },
<span id='BUI-Form-Form-property-defaultChildClass'>    /**
</span>     * 默认的子控件时文本域
     * @type {String}
     */
    defaultChildClass : {
      value : &#39;form-field&#39;
    },
<span id='BUI-Form-Form-property-elTagName'>    /**
</span>     * 使用的标签，为form
     * @type {String}
     */
    elTagName : {
      value : &#39;form&#39;
    },
<span id='BUI-Form-Form-property-buttons'>    /**
</span>     * 表单按钮
     * @type {Array}
     */
    buttons : {

    },
<span id='BUI-Form-Form-property-buttonBar'>    /**
</span>     * 按钮栏
     * @type {BUI.Toolbar.Bar}
     */
    buttonBar : {
      shared : false,
      value : {}
    },
    childContainer : {
      value : &#39;.x-form-fields&#39;
    },
<span id='BUI-Form-Form-property-initRecord'>    /**
</span>     * 表单初始化的数据，用于初始化或者表单回滚
     * @type {Object}
     */
    initRecord : {

    },
<span id='BUI-Form-Form-property-showError'>    /**
</span>     * 表单默认不显示错误，不影响表单分组和表单字段
     * @type {Boolean}
     */
    showError : {
      value : false
    },
    xview : {
      value : FormView
    },
    tpl : {
      value : &#39;&lt;div class=&quot;x-form-fields&quot;&gt;&lt;/div&gt;&#39;
    }
  }
},{
  xclass : &#39;form&#39;
});

Form.View = FormView;

module.exports = Form;
</pre>
</body>
</html>
